<template>
  <!-- 商品管里下的商品列表 -->
  <div class="ComList">
    <div>
      <!-- 搜索框开始 -->
      <el-input
        placeholder="请输入内容"
        class="input-with-select"
        v-model="scher"
      >
        <el-button
          el-button
          slot="append"
          icon="el-icon-search"
          @click="search"
        ></el-button>
      </el-input>
      <!-- 搜索框结束 -->

      <!-- 添加商品按钮开始 -->
      <el-button type="primary" class="btn" @click="add">添加商品</el-button>
      <!-- 添加商品按钮结束 -->
    </div>

    <!-- 商品列表开始 -->
    <div class="el-ta">
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        border
      >
        <el-table-column type="index"> </el-table-column>

        <el-table-column property="goods_name" label="商品名称">
        </el-table-column>

        <el-table-column property="goods_price" label="商品价格" width="80px">
        </el-table-column>

        <el-table-column property="goods_number" label="商品重量" width="80px">
        </el-table-column>

        <el-table-column property="upd_time" label="创建时间" width="180px">
        </el-table-column>

        <el-table-column label="操作" width="180px">
          <template slot-scope="tableData">
            <el-button type="primary" class="el-btn">编辑</el-button>
            <el-button
              type="danger"
              class="el-btn"
              @click="remove(tableData.row.goods_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 商品列表结束 -->

    <!-- 商品分页开始 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[2, 10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 商品分页结束 -->
  </div>
</template>

<script>
import { ComLis, Remover, search1 } from "@/api/user";
// 声明的页数
let val = 1;
// 声明的条数
let vals = 10;
export default {
  name: "ComList",
  data() {
    return {
      // 渲染商品列表所存出的数据
      tableData: [],
      // 所有数据总共的条数
      total: 0,
      // 搜索框的双向绑定
      scher: "",
    };
  },
  mounted() {
    // 进入商品列表页面的初次渲染，请求1页，每页10条数据
    ComLis(val, vals).then((res) => {
      // 数据总条数
      this.total = res.data.data.total;
      // 数据的所有内容
      this.tableData = res.data.data.goods;
    });
  },
  methods: {
    // 点击分页的条数触发的事件，默认1页10条数据，可选为2条，10条，20条，30条
    handleSizeChange(vals) {
      // 点击选择分页条数时判断 搜索框中没有值则走if中正常的渲染数据 , 如果有值则走else中的搜索数据
      if (this.scher == "") {
        // 正常渲染数据
        ComLis(1, vals).then((res) => {
          // 数据的所有内容
          this.tableData = res.data.data.goods;
        });
      } else {
        // 搜索渲染数据
        search1(1, vals, this.scher).then((res) => {
          // 搜索数据总条数
          this.total = res.data.data.total;
          // 搜索数据的所有内容
          this.tableData = res.data.data.goods;
        });
      }
    },
    // 点击分页的的页数时触发的事件
    handleCurrentChange(val) {
      // 点击分页时判断 搜索框中没有值则走if中正常的渲染数据 , 如果有值则走else中的搜索数据
      if (this.scher == "") {
        // 正常渲染数据
        ComLis(val, 10).then((res) => {
          // 数据的所有内容
          this.tableData = res.data.data.goods;
        });
      } else {
        // 搜索渲染数据
        search1(val, 10, this.scher).then((res) => {
          // 搜索数据总条数
          this.total = res.data.data.total;
          // 搜索数据的所有内容
          this.tableData = res.data.data.goods;
        });
      }
    },
    // 点击页面中的删除按钮触发的事件
    remove(id) {
      // 点击之后的弹出框，点击或取消
      this.$confirm("此操作将删除该商品,是否继续?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        // 点击确定触发的删除
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          // 通过传id向请求的接口传送商品的id进行删除
          Remover(id);
          // 产出之后的再次渲染
          ComLis(val, vals).then((res) => {
            this.total = res.data.data.total;
            this.tableData = res.data.data.goods;
          });
        })
        // 点击取消触发的取消
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击页面的添加商品跳转添加页面
    add() {
      this.$router.push("/NaviGation/ComAdmin/ComAdd");
    },
    // 在搜索框输入文字，点击的搜索按钮
    search() {
      // 请求搜索的接口，这里的第三个参数为，搜索框中的值，根据值返回搜索的结果
      search1(val, vals, this.scher).then((res) => {
        // 搜索数据总条数
        this.total = res.data.data.total;
        // 搜索数据的所有内容
        this.tableData = res.data.data.goods;
      });
    },
  },
};
</script>

<style>
.ComList {
  width: 98%;
  height: 90%;
}

.input-with-select {
  width: 300px;
}

.btn {
  margin-left: 20px;
}

.el-btn {
  padding: 10px 14px !important;
}

.el-ta {
  margin-top: 20px;
}
</style>